<template>
  <div class="about">
    <div class="about_header">
      <div class="about_header_log">
        <i class="iconfont icon-wangzhe"></i>
        电竞管理系统
      </div>
      <div class="about_header_out">
        <el-button type="info" @click="out()">退出</el-button>
      </div>
    </div>
    <div class="about_list_box">
      <div
        class="about_list_box_left"
        :class="isCollapse ? 'about_list_box_left_clone' : ''"
      >
        <div class="welcone" @click="collapsechange">Ⅲ</div>
        <el-menu
          :default-active="pathval"
          unique-opened
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          background-color="rgb(51, 55, 68)"
          text-color="#fff"
          active-text-color="blue"
          router
        >
          <el-submenu
            :index="item.order + ''"
            v-for="item in listdata"
            :key="item.id"
          >
            <template slot="title">
              <i
                :class="
                  item.order == 1
                    ? 'el-icon-user-solid'
                    : item.order == 2
                    ? 'el-icon-box'
                    : item.order == 3
                    ? 'el-icon-first-aid-kit'
                    : item.order == 4
                    ? 'el-icon-set-up'
                    : 'el-icon-mobile-phone'
                "
              ></i>
              <span slot="title">{{ item.authName }}</span>
            </template>
            <el-menu-item-group v-for="items in item.children" :key="items.id">
              <el-menu-item
                :index="'/' + items.path"
                @click="keeppath(items.path)"
                ><i class="el-icon-menu"></i>{{ items.authName }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div
        class="about_list_box_right"
        :class="isCollapse ? 'about_list_box_right_clone' : ''"
      >
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/http.js";
export default {
  data() {
    return {
      listdata: [], //导航数据
      isCollapse: false, // 是否 展开
      pathval: "",
    };
  },

  mounted() {
    if (localStorage.getItem("path")) {
      this.pathval = localStorage.getItem("path");
    }
    this.getlistdata();
  },
  methods: {
    // 退出
    out() {
      this.$router.push("/login");
      localStorage.removeItem("token");
    },
    //  //导航数据
    getlistdata() {
      getList().then((res) => {
        this.listdata = res.data;
        // console.log(res.data);
      });
    },
    // 抽屉 效果
    collapsechange() {
      this.isCollapse = !this.isCollapse;
      // console.log(this.isCollapse);
    },
    // 保存最后一个点击的路由
    keeppath(val) {
      // console.log(val);
      this.pathval = `/${val}`;
      localStorage.setItem("path", this.pathval);
      // console.log(this.pathval);
    },
  },

  components: {},
};
</script>

<style lang='scss' scoped>
.about {
  width: 100%;
  height: 100%;
  .about_header {
    width: 100%;
    height: 100px;
    background-color: rgb(19, 18, 18);
    display: flex;
    justify-content: space-between;
    .about_header_log {
      width: 500px;
      height: 100px;
      font-size: 40px;
      // text-align: center;
      line-height: 100px;
      color: #fff;
      display: flex;
      justify-content: center;
      .icon-wangzhe {
        font-size: 100px;
        color: rgb(202, 61, 61);
      }
    }
    .about_header_out {
      width: 200px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .about_list_box {
    width: 100%;
    height: 5000px;
    display: flex;
    .about_list_box_left {
      width: 269px;
      height: 100%;
      background: rgb(51, 55, 68);
      .welcone {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background: #4a5064;
        color: #fff;
        font-size: 30px;
      }
    }
    .about_list_box_left_clone {
      width: 69px;
      height: 100%;
      background: rgb(51, 55, 68);
    }

    .about_list_box_right {
      width: calc(100% - 269px);
      height: 100%;
    }
    .about_list_box_right_clone {
      width: calc(100% - 69px);
      height: 100%;
    }
  }
}
</style>
<style>
.el-menu {
  border: none;
}
</style>
